import { defineComponent } from 'vue';
import { WrapTitle, VueChart } from '@common/index';

export default defineComponent({
  name: 'PatentTrend',
  props: {
    data: Object,
  },
  render(props) {
    const { xAxisData, series } = props?.data;

    const chartOption = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#29333AE6',
        borderColor: '#29333AE6',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: '#FFFFFF33',
            type: 'solid',
            width: 36,
          },
        },
        textStyle: {
          color: '#FFFFFFFF',
        },
      },
      legend: {
        data: ['实用新型', '发明专利', '外观设计'],
        textStyle: {
          color: 'white',
        },
        top: '4%',
        right: '3%',
      },
      grid: {
        top: '12%',
        left: '4%',
        right: '4%',
        bottom: '4%',
        containLabel: true,
      },
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: {
            color: '#BAE7FF33',
            type: 'dashed',
          },
        },
        type: 'value',
        axisLabel: {
          color: 'rgb(230,247,255,0.7)',
          fontSize: 12,
        },
        name: '单位:件',
        nameTextStyle: {
          color: 'rgb(230,247,255,0.7)',
        },
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          color: 'white',
        },
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
      },
      series: [
        {
          name: '实用新型',
          color: '#348FFB',
        },
        {
          name: '发明专利',
          color: '#3BC15A',
        },
        {
          name: '外观设计',
          color: '#E38D00',
        },
      ].map((b) => {
        const currentSeries = series?.find?.((s) => s.name === b.name) ?? {};
        currentSeries.color = b.color;
        return currentSeries;
      }),
    };

    return (
      <div id="PatentTrend">
        <WrapTitle title="专利增长趋势"></WrapTitle>
        <VueChart option={chartOption} style={{ width: '490px', height: '420px' }} />
      </div>
    );
  },
});
